<template>
	<div class="header clearfix">
		<div class="icon-item left" @click="clickCollapse">
			<img
				src="@/static/imgs/home/收缩菜单.png"
				alt="收缩菜单.png"
				width="16px"
				height="16px"
			/>
		</div>

		<el-color-picker
			v-model="globalSet.naviColor"
			:predefine="predefineColors"
			style="margin: 5px 0 0 16px"
			class="left"
		></el-color-picker>
		<Breadcrumb class="mbx-item left" :cur-menu-list="getCurMenuList"></Breadcrumb>

		<el-dropdown trigger="click" class="right head-dropdown">
			<div>
				<img :src="headPhoto" width="40px" height="40px" style="border-radius: 10px" />
				<i class="el-icon-caret-bottom"> </i>
			</div>
			<el-dropdown-menu slot="dropdown">
				<el-dropdown-item
					v-for="item in avatarAreaOptions"
					:key="item"
					@click.native="handlerAvatarOption(item)"
					>{{ item }}</el-dropdown-item
				>
			</el-dropdown-menu>
		</el-dropdown>

		<el-dropdown trigger="click" class="icon-item right">
			<el-tooltip effect="dark" content="布局大小" placement="bottom">
				<img src="@/static/imgs/home/布局.png" alt="布局.png" width="16px" height="16px" />
			</el-tooltip>
			<el-dropdown-menu slot="dropdown">
				<el-dropdown-item v-for="item in layouts" :key="item">{{ item }}</el-dropdown-item>
			</el-dropdown-menu>
		</el-dropdown>

		<div class="icon-item right" @click="clickFullScreen">
			<el-tooltip effect="dark" content="全屏按钮" placement="bottom">
				<img src="@/static/imgs/home/全屏.png" alt="全屏.png" width="16px" height="16px" />
			</el-tooltip>
		</div>

		<el-drawer :visible.sync="isShowLayoutSet" direction="rtl" size="15%" :key="globalSet.void">
			<div style="text-align: start; padding: 0 10px 0 10px">
				<span>布局设置</span>
				<el-divider></el-divider>
				<span style="font-weight: 700">系统布局设置</span>
				<ul class="global-set">
					<li class="clearfix">
						<span class="set-text">显示Logo</span>
						<el-switch v-model="globalSet.showLogo" class="sex-switch"> </el-switch>
					</li>
					<li class="clearfix">
						<span class="set-text">导航栏颜色</span>
						<el-color-picker
							v-model="globalSet.naviColor"
							:predefine="predefineColors"
							class="sex-switch"
						></el-color-picker>
					</li>
				</ul>
				<el-divider></el-divider>
				<el-button class="el-icon-document-checked" @click="saveGlobalSet"
					>保存配置
				</el-button>
				<el-button class="el-icon-refresh-left" @click="resetGlobalSet">重置配置</el-button>
			</div>
		</el-drawer>
	</div>
</template>

<script>
import { mapState } from "vuex"
import Breadcrumb from "@/components/header/Breadcrumb.vue"
import { TagCurMenu } from "@/utils/index.js"
export default {
	name: "FrontAdminHeader",
	components: {
		Breadcrumb,
	},
	data() {
		return {
			isShowLayoutSet: false,
			avatarAreaOptions: ["个人中心", "布局设置", "退出登录"],
			layouts: ["default", "small", "mini"],
			headPhoto: require("@/static/imgs/home/收缩菜单.png"),
			collapse: false,
			predefineColors: ["#304156"],
		}
	},
	computed: {
		...mapState({
			globalSet: (state) => state.globalSet,
		}),
		getCurMenuList() {
			return this.$store.state.curMenuList
		},
	},
	watch: {
		globalSet: {
			handler() {
				this.$store.commit("updateGlobalSet", this.globalSet)
				this.updateColor()
			},
			deep: true,
		},
	},

	methods: {
		saveGlobalSet() {
			this.$store.commit("changeGlobalSet", this.globalSet)
		},
		resetGlobalSet() {
			let globalSet = {
				showLogo: true,
				naviColor: "#304156",
			}
			this.$store.commit("changeGlobalSet", globalSet)
		},
		clickFullScreen() {
			document.documentElement.requestFullscreen()
		},
		clickCollapse() {
			this.collapse = !this.collapse
			this.$emit("click-collapse", this.collapse)
		},
		updateColor() {
			this.$emit("update-color", this.globalSet.naviColor)
		},
		handlerAvatarOption(item) {
			if (item == "个人中心") {
				this.$router.push("/user/profile")
				this.updateTagCurMenu(this, { path: "/user/profile", label: "个人中心" })
			} else if (item == "布局设置") {
				this.isShowLayoutSet = true
			} else {
				this.$emit("logout", true)
			}
		},
		updateTagCurMenu: TagCurMenu.updateTagCurMenu,
	},
}
</script>

<style scoped>
.header {
	min-width: 1200px;
}

.icon-item {
	margin: 12px 0 0 0;
	padding: 5px 5px 0 5px;
	cursor: pointer;
	transition: all 1s;
}
.mbx-item {
	margin: 12px 0 0 0;
	padding: 5px 5px 0 5px;
	cursor: pointer;
}

.icon-item:hover {
	background: rgb(0, 0, 0, 0.3);
}

.left {
	float: left;
	margin-left: 16px;
}
.right {
	float: right;
	margin-right: 16px;
}

.head-dropdown {
	margin: 5px 16px 0 0;
}

.global-set {
	margin: 20px 0 0 0;
}
.set-text {
	float: left;
	margin: 20px 0 0 0;
}
.sex-switch {
	float: right;
	margin: 20px 0 0 0;
}
</style>
